<template>
  <div class="app-container">
    <!--内联表单-->
    <el-form :inline="true">
      <el-form-item>
        <el-input
          v-model="pagination.queryString"
          placeholder="姓名/学号/手机号/邮箱"
          clearable>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button size="mini" icon="el-icon-search"  @click="handleCurrentChange(1)">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDialog">新增</el-button>
      </el-form-item>

      <el-form-item>
        <el-popconfirm title="这是确定批量注销学生吗？" @confirm="handleDeleteSelected()">
          <el-button type="danger" size="mini" icon="el-icon-delete" slot="reference" :disabled="delBtnStatus" >批量删除</el-button>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <!--内联表单-->

    <div style="  background: #fff; margin: 1px 3px 5px 3px;">
      <div class="box">
        <el-card class="box-card">
          <div class="boxMain">
            <el-button style="margin-bottom: 20px;margin-right: 20px" icon="el-icon-download"  size="mini" type="primary" @click="downloadTemplate()">模板下载</el-button>
            <el-upload
              action=""
              name="excelFile"
              :show-file-list="false"
              :on-success="handleSuccess"
              :http-request="handleHttpRequest"
              :before-upload="beforeUpload">
              <el-button size="mini" icon="el-icon-upload2" type="primary">上传文件</el-button>
            </el-upload>
          </div>
          <div>
            操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入学生数据后点击"上传文件"按钮上传模板文件。
          </div>
        </el-card>
      </div>
    </div>

    <div class="table-container">
    <!--展示表格-->
    <el-table
      ref="multipleTable"
      :data="dataList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>


      <el-table-column
        prop="name"
        label="学生姓名"
        width="120">
      </el-table-column>



      <el-table-column
        prop="account"
        label="学号">
      </el-table-column>

      <el-table-column
        prop="birthday"
        label="生日">
      </el-table-column>


      <el-table-column
        prop="college"
        label="学校">
      </el-table-column>

      <el-table-column
        prop="phone"
        label="手机号码">
      </el-table-column>

      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>



      <el-table-column
        prop="education"
        label="受教育程度">
      </el-table-column>

      <el-table-column
        prop="profession"
        label="专业">
      </el-table-column>





      <el-table-column
        prop="sex"
        label="性别">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.sex === 1" type="primary">男</el-tag>
          <el-tag size="small" v-else-if="scope.row.sex === 2" type="danger">女</el-tag>
        </template>
      </el-table-column>



      <el-table-column
        prop="graduateDate"
        label="毕业时间">
      </el-table-column>




      <el-table-column
        prop="icon"
        width="260px"
        label="操作">
        <template slot-scope="scope">
          <template>
            <el-button type="primary" icon="el-icon-view"  size="mini" slot="reference" @click="handleSeeDetail(scope.row)">详情</el-button>
            <el-button type="danger" icon="el-icon-delete"  size="mini" slot="reference" @click="handleDelete(scope.row)">注销</el-button>
          </template>
        </template>
      </el-table-column>

    </el-table>
    <!--展示表格-->
    </div>
    <div class="pagination-container">
    <el-pagination
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      :page-sizes="[10, 20, 50, 100]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total,sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>



    <!--新增学生对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible"
      width="600px"
      :close-on-click-modal="false"
      :before-close="handleAddFormClose">

      <el-form :model="formData" :rules="rule" ref="dataAddForm">

        <el-form-item label="学生姓名" prop="name" label-width="100px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="学生学号"  prop="account" label-width="100px">
          <el-input v-model="formData.account" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="出生年月"  prop="birthday" label-width="100px">
          <el-date-picker
            v-model="formData.birthday"
            type="date"
            placeholder="出生年月">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="专业主攻"  label-width="100px">
          <div class="block">
            <el-cascader
              v-model="value"
              :options="professionTree"
              :show-all-levels="false"
              @change="handleChange">
            </el-cascader>
          </div>
        </el-form-item>

        <el-form-item label="毕业院校"  prop="college" label-width="100px">
          <el-input v-model="formData.college" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="受教育程度"  prop="education" label-width="100px">
          <el-input v-model="formData.education" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="联系电话"  prop="phone" label-width="100px">
          <el-input v-model="formData.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱"  prop="email" label-width="100px">
          <el-input v-model="formData.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex" label-width="100px">
          <el-radio-group v-model="formData.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="毕业时间"  prop="graduateDate" label-width="100px">
          <el-date-picker
            v-model="formData.graduateDate"
            type="date"
            placeholder="毕业时间">
          </el-date-picker>
        </el-form-item>


        <el-form-item label="状态"  prop="status" label-width="100px">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAddFormClose">取 消</el-button>
        <el-button type="primary" @click="handleAdd('dataAddForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增学生对话框-->


    <!--查看学生详情对话框-->
    <el-dialog
      title="查看学生详情对话框"
      :visible.sync="dialogFormVisible4Detail"
      width="800px"
      height="800px"
      :before-close="handleDetailFormClose">
      <el-descriptions title="学生信息">
        <el-descriptions-item label="学生姓名">{{formData.name}}</el-descriptions-item>
        <el-descriptions-item label="学生学号">{{formData.account}}</el-descriptions-item>
        <el-descriptions-item label="学生生日">{{formData.birthday}}</el-descriptions-item>
        <el-descriptions-item label="学生专业">{{formData.profession}}</el-descriptions-item>
        <el-descriptions-item label="学生院校">{{formData.college}}</el-descriptions-item>
        <el-descriptions-item label="受教育程度">{{formData.education}}</el-descriptions-item>
        <el-descriptions-item label="电话">{{formData.phone}}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{formData.email}}</el-descriptions-item>
        <el-descriptions-item label="性别">
          <template>
            <el-tag size="small" v-if="formData.sex === 1" type="success">男</el-tag>
            <el-tag size="small" v-else-if="formData.sex === 2" type="success">女</el-tag>
          </template>

        </el-descriptions-item>
        <el-descriptions-item label="毕业时间">{{formData.graduateDate}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!--查看学生详情对话框-->






  </div>
</template>

<script>
const defaultPagination = {
  currentPage: 1,
  pageSize:10,
  total:0,
  queryParams:{
    queryString:''
  },
};
const defaultStudent = {
  name: null,
  account: null,
  birthday: null,
  college: null,
  education: null,
  phone: null,
  sex: null,
  graduateDate: null,
  status: null,
  email: null
};
import {save,deleteStudent,deleteByBatch,getStudentInfo,changeStudentInfo,update,findByPage,saveStudentByBatch,findById} from '@/api/student';
import {getProfessionTree} from '@/api/profession';
export default {

  name: "index",
  data() {
    return {
      pagination: Object.assign({}, defaultPagination),//分页模型
      dataList: [],//当前页要展示的分页列表数据
      formData: Object.assign({},defaultStudent),//表单数据
      roleFormData: {}, //角色表单数据
      dialogFormVisible4Detail: false,//查询学生详情是否可见
      dialogFormVisible:false,
      delBtnStatus:true,
      professionTree:[],//专业树
      multipleSelection: [], //选中项数据的数组
      value:[],//级联选择器选择的数组
      rule: {
        name: [{required: true, message: '请输入学生名称', trigger: 'blur'}],
        account: [{required: true, message: '请输入账号', trigger: 'blur'}],
        birthday: [{required: true, message: '请输入出生日期', trigger: 'blur'}],
        college: [{required: true, message: '请输入毕业院校', trigger: 'blur'}],
        education: [{required: true, message: '请输入受教育程度', trigger: 'blur'}],
        phone: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
        sex: [{required: true, message: '请输入性别', trigger: 'blur'}],
        graduateDate: [{required: true, message: '请输入毕业时间', trigger: 'blur'}],
        status: [{required: true, message: '请输入学生状态', trigger: 'blur'}],
        email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
      },//表单的校验规则

    }
  },
  created() {
    this.findPage()
    this.getProfessionTree()
  },
  methods: {
    //获取级联专业树
    getProfessionTree(){
      console.info("===系统正在获取级联专业树中===")
      getProfessionTree().then(res=>{this.professionTree = res.data;})
      console.info("===系统获取级联专业树成功！===")
    },
    //级联点击选择触发本方法
    handleChange(value) {
      //把专业ID赋值给form表单
      console.info("====系统感知学生选择了级联专业树的专业ID{}，赋值给form表单=======",value[1])
      this.formData.professionId = value[1]
    },
    //下载学生信息模板文件
    downloadTemplate() {
      window.location.href= "https://wnxbucket-001.oss-cn-guangzhou.aliyuncs.com/myblog/student_template.xlsx"
    },
    //上传之前进行文件格式校验
    beforeUpload(file) {
      const isXLS = file.type === 'application/vnd.ms-excel';
      if (isXLS) {
        return true;
      }
      const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (isXLSX) {
        return true;
      }
      this.$message.error('上传文件只能是xls或者xlsx格式!');
      return false;
    },
    //处理自定义的excel上传，实现批量上传学生信息
    handleHttpRequest(params) {
      console.info("===系统处理自定义的excel上传，实现批量上传学生信息中===")
      let formData = new FormData();
      formData.append('excelFile', params.file);
      formData.append('FileName', params.file.name);
      saveStudentByBatch(formData).then(res=>{
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {this.handleCurrentChange(1)}
         })
          this.handleCurrentChange(1)




      })
      console.info("===系统处理自定义的excel上传，实现批量上传学生信息成功！===")
    },
    //上传成功提示
    handleSuccess(response, file) {
      this.$message({message: "批量新增学生信息成功！", type: 'success'})
      this.handleCurrentChange(1)
    },
    //弹出添加窗口的方法
    handleAddDialog() {
      this.resetForm();
      this.dialogFormVisible = true;
    },
    //处理添加的方法
    handleAdd(formName) {
      console.info("【系统正在进行增加学生....】")
      this.$refs[formName].validate((valid) => {
        if (valid) {
          save(this.formData).then(res=>{
            //弹出提示框，显示成功信息
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {

              }
            });
            this.dialogFormVisible = false;
            this.handleCurrentChange(1)

          })
        }
      })
      console.info("【======系统增加学生成功！====】")
    },
    //关闭新增表单窗口的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
      this.resetForm();
    },
    //处理删除的方法
    handleDelete(row) {
      this.$confirm(`此操作将【永久注销】该${row.name}学生, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("====系统正在删除学生信息====")
        deleteStudent(row.id).then(res=>{
          //弹出成功提示框，显示成功信息
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.handleCurrentChange(1)
            }
          });
        });
      }).catch(() => {

      });
      console.log("====系统删除学生信息成功！！====");
    },
    //处理表格勾选
    handleSelectionChange(val) {
      //获取学生勾选想赋值数据模型multipleSelection
      this.multipleSelection = val;
      //根据选中数判断批量删除按钮是否激活
      this.delBtnStatus = val.length === 0
    },
    //处理批量删除
    handleDeleteSelected() {
      //定义一个删除ID的数组容器
      const ids = []
      //遍历multipleSelection，取出ID，给到容器
      for (const item of this.multipleSelection) {
        ids.push(item.id)
      }
      //发送请求给后端删除
      deleteByBatch(ids).then(res=>{
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose: () => {
            this.handleCurrentChange(1)
          }
        });
      })
    },
    //弹出查询学生详情窗口的方法
    handleSeeDetail(row) {
      //清空表单项
      this.resetForm();
      this.dialogFormVisible4Detail = true;
      findById(row.id).then(res=>{
        this.formData = res.data;
      })
    },
    //关闭查询学生详情表单
    handleDetailFormClose() {
      //关闭查询详情对话框
      this.dialogFormVisible4Detail = false
      //设置表单数据模型为空
      this.resetForm();
    },
    //重置表单的方法
    resetForm() {
      this.formData = {}
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      //修改pagination.pageSize数据模型值，赋值为pageSize
      this.pagination.pageSize = pageSize
      //刷新表格
      this.findPage()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      //修改pagination.currentPage数据模型值，赋值为currentPage
      this.pagination.currentPage = currentPage;
      //刷新表格
      this.findPage()
    },
    //处理分页查询的方法
    findPage() {
      //携带pagination对象，发送请求
      console.log("【==系统正在分页查询学生信息中===】")
      findByPage(this.pagination).then(res=>{
        this.dataList = res.data.rows;
        this.pagination.total = res.data.total;
      })
      console.log("【==系统成功分页查询学生信息！！===】")

    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

  }
}
</script>

<style scoped>

</style>
